<!--suppress ALL -->
<template>
	<view class="container-white">
		<view>
			<!-- 顶部状态栏占位view -->
			<view class="status_bar"><view class="top_view" :class="isLucency ? '' : 'tab-bar-show'"></view></view>

			<view class="tab-bar" :class="isLucency ? '' : 'tab-bar-show'">
				<view style="width: 70upx; height: 34upx;position: absolute;text-align: center;" @click="goUser">
					<image :src="isLucency ? '../../static/icon/iconfont-back.png' : '../../static/icon/icon-back.png'" style="width: 20upx; height: 34upx;" />
				</view>
				<view class="daily-tabs" v-if="type == 3" v-show="!isFixation">
					<view :class="{ isCheck: dailyType == 1, 'daily-tab': true }" @click="clickDailyType(1)">天赋榜</view>
					<view :class="{ isCheck: dailyType == 2, 'daily-tab': true }" @click="clickDailyType(2)">勤奋榜</view>
				</view>
				<view style="flex: 1;text-align: center;">排行榜</view>
				<rattenking-picker
					fields="month"
					start="2019-07"
					:end="endDate"
					:value="value"
					@change="bindChange"
					style="position: absolute;right: 30upx;color: #fff;"
				></rattenking-picker>
			</view>

			<image src="../../static/img/rank-bg.png" style="width: 100%;height: 600upx;" />
			<image class="avatar-bg" src="../../static/img/avatar-bg.png" />
			<image class="ranking-bg" src="../../static/img/ranking-bg.png" />
			<image class="avatar" :src="userPortrait ? userPortrait : '/static/logo/logo1024x1024.png'" />
			<view class="ranking-num-large">{{ 0 >= userRanking ? '暂无排名' : '第' + userRanking + '名' }}</view>
			<view class="name" style="color: #FFFFFF;position: absolute;top: 504upx;left: 280upx;width: 150upx;z-index: 10;display: flex;justify-content: center;">{{ userName }}</view>
		</view>

		<view v-if="isFixation" style="padding: 30upx 0;height:50upx;"></view>
		<view class="cate-box" :class="isFixation ? 'fixation' : ''" :style="{ top: isFixation ? cateTop : '' }">
			<picker @change="bindPickerChange" :value="arrayIndex" v-for="(item, index) in cateList" :key="index" :range="item.list" :disabled="item.disabled" range-key="examName">
				<view class="cate" :class="cateIndex == index ? 'active' : 'none'" @click="cateIndexFn(index)">{{ item.name }}</view>
			</picker>
		</view>
		<view>
			<view style="padding: 0upx 42upx;background: #FFFFFF;height: calc(100%);">
				<view v-if="frontRankList.length > 0">
					<view class="flex-box" v-for="item in frontRankList" :key="item.rank">
						<view style="width: 60upx;text-align: center;">
							<text v-if="item.rank > 3" style="color: #999999;font-size: 36upx;">{{ item.rank }}</text>
							<image
								v-else
								class="ranking-icon"
								:src="item.rank == 1 ? '../../static/icon/icon-first.png' : item.rank == 2 ? '../../static/icon/icon-second.png' : '../../static/icon/icon-third.png'"
							/>
						</view>
						<view style="display:flex;flex: 1;">
							<image class="avatar-small" :src="item.headUrl ? item.headUrl : '/static/logo/logo1024x1024.png'" />
							<view v-if="item.realName" class="name-box">
								<view class="name">
									{{ item.realName }}
									<view v-if="item.repairExam" class="tips">补考</view>
								</view>
								<view class="dept-name" v-if="item.deptName">{{ item.deptName }}</view>
							</view>
						</view>
						<view>
							<view class="ranking-num" :style="item.rank > 2 ? 'color: #939393;' : ''">第{{ item.rank }}名</view>
							<view class="integral" v-if="cateIndex == 2">
								<template v-if="dailyType === 1">
									答对{{ item.rightQuesNum }}题
								</template>
								<template v-if="dailyType === 2">
									已答{{ item.answQuesNum }}道
								</template>
							</view>
							<view class="integral" v-else>{{ item.score }}分</view>
						</view>
					</view>

					<view class="flex-box" v-if="behindRankList.length > 0" style="justify-content: center;color: #D0DEE5;font-weight: bold;">↓ ↓ ↓ 后三名 ↓ ↓ ↓</view>
					<template v-if="behindRankList.length > 0">
						<view class="flex-box" v-for="item in behindRankList" :key="item.rank">
							<view style="width: 60upx; text-align: center;">
								<text v-if="item.rank > 3" style="color: #999999;font-size: 36upx;">{{ item.rank }}</text>
								<image
									v-else
									class="ranking-icon"
									:src="item.rank == 1 ? '../../static/icon/icon-first.png' : item.rank == 2 ? '../../static/icon/icon-second.png' : '../../static/icon/icon-third.png'"
								/>
							</view>
							<view style="display:flex;flex: 1;">
								<image class="avatar-small" :src="item.headUrl ? item.headUrl : '/static/logo/logo1024x1024.png'" />
								<view v-if="item.realName" class="name-box">
									<view class="name">
										{{ item.realName }}
										<view v-if="item.repairExam" class="tips">补考</view>
									</view>
									<view class="dept-name" v-if="item.deptName">{{ item.deptName }}</view>
								</view>
								<view class="dept-name" v-if="item.deptName">{{ item.deptName }}</view>
							</view>
						</view>
					</template>
				</view>
				<view v-else style="text-align: center;font-size: 30upx;color: #999999;margin-top: 80upx;">暂无排名</view>
			</view>
		</view>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';
export default {
	data() {
		return {
			arrayIndex: 0,
			array: [],
			examId: '',
			dailyId: '',
			dailyType: 1,
			cateList: [
				{
					name: '正式考试',
					type: 1,
					list: [],
					disabled: false
				},
				{
					name: '模拟考试',
					type: 2,
					list: [],
					disabled: false
				},
				{
					name: '每日一题',
					type: 3,
					list: [],
					disabled: false
				}
			],
			cateIndex: 0,
			userName: '',
			userPortrait: '',
			userRanking: 0,
			userDeptId: '',
			time: '',
			value: '',
			endDate: '2020-12',
			type: 1,
			isLucency: true,
			isFixation: false,
			cateTop: '0upx',
			craftId: null,
			frontRankList: [],
			behindRankList: []
		};
	},
	onLoad() {
		let data = new Date();
		var year = data.getFullYear();
		var month = data.getMonth() + 1;
		month = month < 10 ? '0' + month : month;
		this.value = year.toString() + '-' + month.toString();
		this.endDate = year.toString() + '-' + month.toString();
		var that = this;
		uni.getSystemInfo({
			success: function(res) {
				that.cateTop = res.statusBarHeight + 100 + 'upx';
			}
		});
		this.changeCate(this.cateIndex);
	},
	onPageScroll(obj) {
		if (obj.scrollTop > 10) {
			this.isLucency = false;
		} else {
			this.isLucency = true;
		}
		if (obj.scrollTop > 240) {
			this.isFixation = true;
		} else {
			this.isFixation = false;
		}
	},
	methods: {
		cateIndexFn(index, bool = true) {
			if (bool && this.cateIndex == index) {
				return false;
			}
			this.cateIndex = index;
			this.type = this.cateList[index].type;
			if (this.cateList[this.type - 1].disabled) {
				this.frontRankList = [];
				this.behindRankList = [];
				this.userName = '';
				this.userRanking = 0;
				this.userPortrait = '';
				this.dailyId = null;
				this.examId = null;
			} else {
				this.arrayIndex = 0;
				if (this.type === 3) {
					this.dailyId = this.cateList[2].list[this.arrayIndex].id;
					this.getDailyTopicRanking();
				} else {
					this.examId = this.cateList[this.type - 1].list[this.arrayIndex].id;
					this.getExamRankingList();
				}
			}
		},
		clickDailyType(type) {
			this.dailyType = type;
			if (this.dailyId != null) this.getDailyTopicRanking();
		},
		bindPickerChange(e) {
			if (this.arrayIndex == e.target.value) {
				return false;
			}
			this.arrayIndex = e.target.value;
			if (this.type === 3) {
				this.dailyId = this.cateList[2].list[this.arrayIndex].id;
				this.getDailyTopicRanking();
			} else {
				this.examId = this.cateList[this.type - 1].list[this.arrayIndex].id;
				this.getExamRankingList();
			}
		},
		changeCate(index) {
			let data = this.value.split('-');
			post_md5('/exam-app/exam/examlistbymonth', {
				year: data[0],
				month: data[1]
			}).then(res => {
				if (res.data !== null) {
					if (res.data.zsExamList.length > 0) {
						this.cateList[0].list = res.data.zsExamList;
						this.cateList[0].disabled = false;
					} else {
						this.cateList[0].list = [
							{
								examName: '暂无数据'
							}
						];
						this.cateList[0].disabled = true;
					}

					if (res.data.mnExamList.length > 0) {
						this.cateList[1].list = res.data.mnExamList;
						this.cateList[1].disabled = false;
					} else {
						this.cateList[1].list = [
							{
								examName: '暂无数据'
							}
						];
						this.cateList[1].disabled = true;
					}

					if (res.data.dailyExamList.length > 0) {
						this.cateList[2].list = res.data.dailyExamList;
						this.cateList[2].disabled = false;
					} else {
						this.cateList[2].list = [
							{
								examName: '暂无数据'
							}
						];
						this.cateList[2].disabled = true;
					}
					this.cateIndexFn(index, false);
				} else {
					this.cateList.forEach(x => {
						x.list = [
							{
								examName: '暂无数据'
							}
						];
						x.disabled = true;
					});
				}
			});
		},
		getExamRankingList() {
			const params = {
				userId: uni.getStorageSync('userId'),
				type: this.type,
				examId: this.examId
			};
			post_md5('/exam-app/rank/examrank', params).then(res => {
				if (res.data) {
					this.frontRankList = res.data.frontRankList || [];
					this.behindRankList = res.data.behindRankList || [];
					this.userName = res.data.realname || '';
					this.userRanking = res.data.userRank || 0;
					this.userPortrait = res.data.headUrl;
				}
			});
		},

		getDailyTopicRanking() {
			this.frontRankList = []
			this.behindRankList = []
			const params = {
				userId: uni.getStorageSync('userId'),
				type: this.dailyType,
				dailyId: this.dailyId
			};
			post_md5('/exam-app/rank/dailyrank', params).then(res => {
				if (res.data) {
					this.frontRankList = res.data.frontRankList || [];
					this.behindRankList = res.data.behindRankList || [];
					this.userName = res.data.realname || '';
					this.userRanking = res.data.userRank || 0;
					this.userPortrait = res.data.headUrl;
				}
			});
		},

		goUser() {
			uni.navigateBack();
		},
		bindChange(e) {
			this.value = e;
			this.changeCate(this.cateIndex);
		}
	}
};
</script>

<style>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background: rgba(255, 255, 255, 0);
	position: absolute;
	transition: all 0.5s;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background: rgba(255, 255, 255, 0);
	top: 0;
	z-index: 999;
	transition: all 0.5s;
}

.tab-bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 80upx;
	position: fixed;
	top: var(--status-bar-height);
	left: 0;
	z-index: 100;
	color: #ffffff;
	font-size: 32upx;
	/* font-weight: bold; */
	width: 100%;
	background: rgba(255, 255, 255, 0);
	transition: all 0.5s;
}

.tab-bar-show {
	background: rgba(255, 255, 255, 1);
	color: #000000;
}

.daily-tabs {
	position: absolute;
	left: 40upx;
	top: 107upx;
	width: 220upx;
	height: 40upx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20upx;
	border-radius: 20upx;
	overflow: hidden;
	background: #007aff;
	color: #ffffff;
}

.daily-tab {
	line-height: 40upx;
	flex: 1;
	text-align: center;
}

.avatar-bg {
	width: 284upx;
	height: 217upx;
	position: absolute;
	margin: auto;
	top: 176upx;
	left: 233upx;
	z-index: 10;
}

.avatar {
	width: 192upx;
	height: 192upx;
	border-radius: 50%;
	position: absolute;
	top: 172upx;
	left: 279upx;
}

.ranking-num-large {
	font-size: 40upx;
	font-weight: bold;
	color: #000000;
	position: absolute;
	top: 424upx;
	left: 280upx;
	width: 200upx;
	text-align: center;
}

.cate-box {
	display: flex;
	justify-content: space-around;
	background: #ffffff;
	padding: 30upx 0 20upx;
	margin-top: 0;
	transition: all 0.5s;
}

.fixation {
	position: fixed;
	/* top: 120upx; */
	z-index: 10;
}

.cate {
	width: 200upx;
	height: 50upx;
	border-radius: 25upx;
	font-size: 28upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.subcate {
	position: absolute;
	width: 200upx;
	text-align: center;
	/* top: 710upx; */
	right: 24upx;
	line-height: 60upx;
	margin-top: 120upx;
}

/* .subcatehide {
		height: 0upx;
		background: rgba(255, 255, 255, 0);
	} */

/* .subcateshow {
		height: 180upx;
		background: rgba(255, 255, 255, 1);
		transition: all 1;
	} */

.none {
	border: 1upx solid #999999;
	color: #999999;
	border: 1upx solid #999999;
}

.active {
	color: #ffffff;
	border: 1upx solid #02a8f4;
	background: #02a8f4;
	box-shadow: 0px 0px 8upx 0px #02a8f4;
}

.ranking-bg {
	width: 402upx;
	height: 83upx;
	position: absolute;
	top: 410upx;
	left: 174upx;
}

.rank-title {
	width: 290upx;
	font-size: 32upx;
	font-weight: bold;
	color: #595959;
	padding-bottom: 14upx;
	border-bottom: 6upx solid rgba(153, 153, 153, 0.16);
	margin-top: 20upx;
	text-align: center;
}

.flex-box {
	border-bottom: 4upx solid #f3f3f3;
	padding: 30upx;
}

.ranking-icon {
	display: inline-block;
	width: 47upx;
	height: 59upx;
}

.avatar-small {
	width: 90upx;
	height: 90upx;
	border-radius: 50%;
	margin-left: 24upx;
}

.name-box {
	flex: 1;
	margin-left: 40upx;
}

.name {
	display: inline-block;
	position: relative;
	padding-right: 60upx;
	color: #0a90cf;
	font-size: 30upx;
}

.dept-name {
	margin-top: 22upx;
	font-size: 22upx;
	color: #999999;
}

.tips {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 10upx;
	font-weight: 400;
	font-size: 24upx;
	height: 36upx;
	background: #fe8829;
	color: #ffffff;
	text-align: center;
	transform: scale(0.7);
}

.tips:after {
	display: block;
	position: absolute;
	bottom: -19upx;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	border: 10upx solid #fe8829;
	border-bottom-color: #ffffff;
	border-left-color: #ffffff;
	border-right-color: #ffffff;
}

.ranking-num {
	font-size: 30upx;
	color: #fe8829;
	text-align: center;
}

.integral {
	font-size: 24upx;
	color: #9b9b9b;
	text-align: center;
	margin-top: 14upx;
}
</style>
